<template>
    <div class="user-body">
        <!-- 用户基本信息 -->
        <div class="header">
            <div class="avatar">
                <el-image
                    style="width: 100%; height: 100%"
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                    fit="cover" />
            </div>
            <div class="user-info">
                <div class="a">
                    <div class="nickName">{{ userInfo.nikename }}</div>
                    <div class="icon-vip"></div>
                    <span class="icon-lv">
                        {{ userInfo.level }}
                        <i class="icon-lv2"></i>
                    </span>
                    <div class="icon-sex" :style="{ 'background-position': `-41px -${iconSex}px` }"></div>
                    <el-button class="btn">编辑个人资料</el-button>
                </div>
                <div class="b">
                    <div class="f1">
                        <div class="f1-item1">0</div>
                        <div class="f1-item2">动态</div>
                    </div>
                    <div class="f2">
                        <div class="f2-item1">0</div>
                        <div class="f2-item2">关注</div>
                    </div>
                    <div class="f3">
                        <div class="f3-item1">0</div>
                        <div class="f3-item2">粉丝</div>
                    </div>
                </div>
                <div class="c">
                    <span>所在地区：</span>
                    <span>广西</span>
                    <span>&nbsp;-&nbsp;</span>
                    <span>南宁市</span>
                </div>
                <div class="d">
                    <div>社交网络：</div>
                    <div class="icon"></div>
                </div>
            </div>
        </div>

        <!-- 听歌排行 -->
        <div class="ranking">
            <ComNav
                title="听歌排行"
                moreLink="/discover/playlist/"
                moreText="所有时间"
                :showIcon="false"
                :hideBackground="true" />
            <template v-if="songs && songs.length > 0">
                <SongTable :songList="songs" :showHeader="false" :changeStatistics="true" />
            </template>
            <template v-else>
                <div class="n-nmusic">
                    <i></i>
                    <span>暂无听歌记录</span>
                </div>
            </template>
        </div>

        <!-- 我创建的歌单 -->
        <div class="playlist">
            <ComNav
                title="我创建的歌单"
                moreLink="/discover/playlist/"
                moreText=""
                :showIcon="false"
                :hideBackground="true" />
            <ComCardList :list="recommendList" />
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import useStore from '../store/user.ts';
import ComNav from '../components/ComNav.vue';
import SongTable from '../components/SongTable.vue';
import ComCardList from '../components/ComCardList.vue'

// 用户状态
const userStore = useStore();

// 57：男  27：女
const iconSex = ref(57);

const userInfo = ref({});

const songs = [
    {
        id: 1959354904,
        name: '蓝色',
        nameHighlight: '者着比前',
        duration: '03:16',
        artist: '郑润泽',
        artistId: 29051613,
        artistHighlight: '藞',
        album: '蓝色',
        albumId: 147141279,
        albumHighlight: '龙满一'
    },
    {
        id: 1959354904,
        name: '蓝色',
        nameHighlight: '者着比前',
        duration: '03:16',
        artist: '郑润泽',
        artistId: 29051613,
        artistHighlight: '藞',
        album: '蓝色',
        albumId: 147141279,
        albumHighlight: '龙满一'
    },
    {
        id: 1959354904,
        name: '蓝色',
        nameHighlight: '者着比前',
        duration: '03:16',
        artist: '郑润泽',
        artistId: 29051613,
        artistHighlight: '藞',
        album: '蓝色',
        albumId: 147141279,
        albumHighlight: '龙满一'
    },
    {
        id: 1959354904,
        name: '蓝色',
        nameHighlight: '者着比前',
        duration: '03:16',
        artist: '郑润泽',
        artistId: 29051613,
        artistHighlight: '藞',
        album: '蓝色',
        albumId: 147141279,
        albumHighlight: '龙满一'
    },
    // 可添加更多歌曲项
];

const recommendList = [
    {
        id: 1,
        name: '我喜欢的音乐',
        picUrl: 'http://p2.music.126.net/QcPJfzds8ejF1FPgBaXMTw==/109951163128461676.jpg?param=140y140',
        playCount: 33680000,
        hasIcon: false
    }
];

onMounted(()=>{
    userInfo.value = userStore.userInfo;
    if(userInfo.value.sex==0){
        iconSex.value = 57;
    }else{
        iconSex.value = 27;
    }
})
</script>

<style lang="scss" scoped>
.user-body {
    width: 980px;
    min-height: 800px;
    background: rgb(255, 255, 255);
    margin: 0 auto;
    padding: 40px;
    border-left: 1px solid #d3d3d3;
    border-right: 1px solid #d3d3d3;

    .header {
        display: flex;

        .avatar {
            width: 180px;
            height: 180px;
            padding: 3px;
            background: #fff;
            border: 1px solid #d5d5d5;
        }
        .user-info {
            flex: 1;
            margin-left: 40px;
            .a {
                display: flex;
                padding-bottom: 12px;
                margin-bottom: 10px;
                border-bottom: 1px solid #ddd;
                .nickName {
                    font-size: 22px;
                    margin-top: 3px;

                }
                .icon-vip {
                    width: 65px;
                    height: 36px;
                    background-size: auto 20px;
                    background-repeat: no-repeat;
                    background-position: center;
                    margin-left: 10px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    background-image: url(../assets/MyInfo/vip.png);
                }
                .icon-lv {
                    float: left;
                    display: inline-block;
                    height: 19px;
                    overflow: hidden;
                    margin: 8px 0 0 10px;
                    padding-left: 29px;
                    line-height: 21px;
                    color: #e03a24;
                    font-size: 14px;
                    font-weight: bold;
                    font-style: italic;
                    vertical-align: middle;
                    background: url(../assets/MyInfo/icon.png);
                    background-position: -135px -190px;
                }
                .icon-lv2 {
                    float: right;
                    width: 9px;
                    height: 19px;
                    display: inline-block;
                    overflow: hidden;
                    vertical-align: middle;
                    font-style: normal;
                    text-align: left;
                    font-size: inherit;
                    background: url(../assets/MyInfo/icon.png);
                    background-position: -191px -190px;
                }
                .icon-sex {
                    margin-top: 9px;
                    margin: 9px 0 0 8px;
                    width: 20px;
                    height: 20px;
                    overflow: hidden;
                    vertical-align: middle;
                    background: url(../assets/MyInfo/icon2.png);
                }
                .btn {
                    margin-left: 285px;
                    margin-top: 3px;
                }
            }

            .b {
                display: flex;
                margin-bottom: 15px;
                .f1 {
                    width: 66px;
                    height: 39px;
                    padding: 0 40px 0 0;
                    .f1-item1 {
                        margin-top: -4px;
                        font-size: 24px;
                        font-weight: normal;
                        cursor: pointer;
                    }
                    .f1-item2 {
                        cursor: pointer;
                        color: #666;
                    }
                }
                .f2 {
                    width: 86px;
                    height: 39px;
                    padding: 0 40px 0 20px;
                    border-left: 1px solid #ddd;
                    .f2-item1 {
                        margin-top: -4px;
                        font-size: 24px;
                        font-weight: normal;
                        cursor: pointer;
                    }
                    .f2-item2 {
                        cursor: pointer;
                        color: #666;
                    }
                }
                .f3 {
                    width: 86px;
                    height: 39px;
                    padding: 0 40px 0 20px;
                    border-left: 1px solid #ddd;
                    .f3-item1 {
                        margin-top: -4px;
                        font-size: 24px;
                        font-weight: normal;
                        cursor: pointer;
                    }
                    .f3-item2 {
                        cursor: pointer;
                        color: #666;
                    }
                }
            }

            .c {
                color: #666;
                margin: 15px 0 10px 0;
            }

            .d {
                color: #666;
                display: flex;
                align-items: center;
                .icon {
                    width: 20px;
                    height: 20px;
                    margin-left: 8px;
                    background: url(../assets/MyInfo/logo.png);
                    background-position: 0 -25px;
                }
            }
        }
    }

    .ranking {
        width: 100%;
        min-height: 100px;
        margin-top: 40px;

        .n-nmusic {
            padding: 105px 0 135px 0;
            text-align: center;
            i {
                margin-right: 17px;
                width: 64px;
                height: 50px;
                display: inline-block;
                overflow: hidden;
                vertical-align: middle;
                background: url(../assets/MyInfo/ting.png);
                background-position: 0 -347px;
            }
            span{
                font-size: 18px;
                font-weight: bold;
            }
        }
    }

    .playlist {
        width: 100%;
        min-height: 100px;
        margin-top: 40px;
    }
}
</style>
